<!-- 个人中心 -->
<template>
	<view class="components-theme">
		<!-- 顶部背景 -->
		<view class='UCenter-bg' :style="'background-image: url('+backgroundImage+');margin-top:0px;'">
			<cu-custom style="height: 0px;position: absolute;left: 0px;"  :isBack="true">
				<block style="left: 0px;" slot="backText">返回</block>
			</cu-custom>
			<block>
				<view class='text-center'>
					<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data" 
					:style="'overflow: hidden;background-image: url(' +UserData.HeadImage +');'">
					</view>
					<view class="padding text-blue text-xl text-bold">
						{{UserData.UserName}}-{{UserData.Station}}
					</view>

				</view>
			</block>

			<image :src='bolang'
			 mode='scaleToFill' class='gif-wave'></image>
		</view>

		<block>
			
			<view class="cu-list menu card-menu margin-top-lg margin-bottom-sm shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item">
					<button class='content cu-btn' open-type="share">
						<image :src='iocn1' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>分享小程序</text>
					</button>
				</view>
				
				
				<view class="cu-item">
					<button class='content cu-btn' @click="gohome" data-target="ModalGitee">
							<image :src='iocn7' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>回首页</text>
					</button>
				</view>
			</view>

			<view class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item ">
					<button @click="openUpdateUserRealName" class='content cu-btn'>
						<image :src='iocn2' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>姓名修改</text>
					</button>
				</view> 

				<view class="cu-item">
					<button class='content cu-btn' @click="back" data-target="ModalGitee">
							<image :src='iocn4' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>退出登陆</text>
					</button>
				</view>
			</view>

		</block>
		<view style="height: 110rpx;width: 1rpx;"></view>
		
		<!-- Gitee弹窗 -->
		<view class="cu-modal" :class="modalName=='ModalGitee'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改姓名</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<u-input v-model="UserData.UserName" type="text" border="true" />
				</view>
				<view class="padding-xl">
					<u-button @click="saveUpdateUserRealName" type="primary">保存</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/common/request.js';
	export default {
		data() {
			return {
				countSetting:{
					jobCount:11,
					qrcodeCount:11,
					qrcodeItemCount:11,
					phone:'19551949761'
				},
				bolang:this.$request22.baseUrl1+'/Resource/sg/bolang.gif',
				backgroundImage:this.$request22.baseUrl1+'/Resource/sg/zjx_me_bg6.jpg',
				iocn1:this.$request22.baseUrl1+'/Resource/sg/lvhang.png',
				iocn2:this.$request22.baseUrl1+'/Resource/sg/diannao.png',
				iocn3:this.$request22.baseUrl1+'/Resource/sg/dengta.png',
				iocn4:this.$request22.baseUrl1+'/Resource/sg/chucuo.png',
				iocn7:this.$request22.baseUrl1+'/Resource/sg/gohome.png',
				icon5:'/static/wx.png',
				UserData:{
					UserName:'巡检员',
					HeadImage:this.$request22.baseUrl1+'/Resource/sg/logo.png',
					UserData:''
				},
				share:{
					 title:'维保码',
					 path:'/pages/qrcode/login',
					 imageUrl:this.$request22.baseUrl1+'/Resource/sg/logo.png',
					 desc:'二维码设备维保系统',
					 content:'二维码设备维保系统'
				},
				spaceShow:true,
				modalName: null,
				isShow:false,
				updateUserData:{
					code:'',
					realName:''
				},
			}
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title:this.share.path,
				path:this.share.path,
				imageUrl:this.share.imageUrl,
				desc:this.share.desc,
				content:this.share.content,
				success(res){
					uni.showToast({
						title:'分享成功'
					})
				},
				fail(res){
					uni.showToast({
						title:'分享失败',
						icon:'none'
					})
				}
			}
		},
		watch:{
			topBackGroupImageIndex(val) {
				console.log(val)
				if (val == 4 || val == 5 ) {
					this.spaceShow = true;
				}else{
					this.spaceShow = false;
				}
			}
		},
		onLoad(option){
			
			let that=this
			//this.getIntervalPosition()
			if(option.code){
				that.updateUserData.code=option.code
				let opts = {
					url: 'api/UpdateUserGZHOpenid',
					method: 'get'
				};
				request.httpTokenRequest(opts,that.updateUserData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '绑定成功', icon: '/static/success.png' });
					}
					else{
						uni.hideLoading();
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			}
		},
		onShow(){
		},
		created() {
		},
		mounted() {
			this.getUser();
		},
		methods: {
			saveUpdateUserRealName(){
				let that=this
				let opts = {
					url: 'api/UpdateUserRealName',
					method: 'get'
				};
				if(that.UserData.UserName==null||that.UserData.UserName==''){
					uni.showToast({ title: '请输入用户名', icon: 'none' });
					return
				}
				that.updateUserData.realName=that.UserData.UserName
				//realName
				request.httpTokenRequest(opts,that.updateUserData).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						uni.showToast({ title: '更新成功', icon: '/static/success.png' });
						//修改缓存
						that.modalName=null
						uni.getStorage({
							key:'userdata',
							success(userdataRes) {
								let userdataNew=userdataRes.data
								userdataNew.RealName=that.UserData.UserName
								
								uni.setStorage({
									key:'userdata',
									data:userdataNew,
									success() {
									}
								})
							}
						})
					}
					else{
						uni.hideLoading();
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			openUpdateUserRealName(){
				let that=this
				that.modalName='ModalGitee'
			},
			gohome(){
				setTimeout(() => {
					 uni.reLaunch({
						url: '/pages/index/tabbar?PageCur=index'
					 });
				}, 0)
			},
			gzhAuth(){
				let that=this
				that.modalName='ModalGitee'
			},
			// gzhAuth(){
			// 	let that=this
			// 	that.isShow = true
			// },
			getUser(){
				let opts = {
					url: 'api/getUserData',
					method: 'get'
				};
				request.httpTokenRequest(opts).then(res => {
					if(res.data.code == 1){
						this.countSetting.phone=res.data.data.phone;
						this.countSetting.jobCount=res.data.data.jobCount;
						this.countSetting.qrcodeCount=res.data.data.qrcodeCount;
						this.countSetting.qrcodeItemCount=res.data.data.qrcodeItemCount;
						
						this.UserData.UserName=res.data.data.user.RealName
						this.UserData.Station=res.data.data.user.Station
						let image=res.data.data.user.Headimg
						if(image==''||image==null){
							image=this.$request22.baseUrl1+'/Resource/Sg/logo.png';
						}else{
							image=this.$request22.baseUrl1+image
						}
						this.UserData.HeadImage=image
					}
					else{
						uni.showToast({ title: res.data.msg, icon: 'none' });
					}
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			showGitee(e){
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: this.countSetting.phone,
				});
			},
			unbuindWX(){
				uni.showModal({
					title: '提示',
					content: '解绑之后不可使用自动登陆功能',
					success: function (res) {
						if (res.confirm) {
							//调用接口
							let opts = {
								url: 'api/UnBindWX',
								method: 'post'
							};
							request.httpTokenRequest(opts).then(res => {
								if(res.data.code == 1){
									uni.showToast({ title: '解绑成功！', icon: '/static/success.png'  });
								}
								else{
									uni.showToast({ title: res.data.msg, icon: 'none' });
								}
							});
						}
					}
				});
			},
			back(){
				uni.showModal({
					title: '提示',
					content: '确认退出登陆？',
					success: function (res) {
						if (res.confirm) {
							// let opts = {
							// 	url: 'api/LoginOff',
							// 	method: 'post'
							// };
							// request.httpTokenRequest(opts).then(res => {
							// 	uni.clearStorageSync();
							// 	if(res.data.code == 1){
							// 		uni.showToast({ title: '返回登录页...', icon: '/static/success.png'  });
							// 		setTimeout(() => {
							// 		      uni.reLaunch({
							// 		      	url: '/pages/qrcode/login'
							// 		      });
							// 		}, 1000)
							// 	}
							// 	else{
							// 		uni.showToast({ title: '返回登录页...', icon: '/static/success.png'  });
							// 		setTimeout(() => {
							// 		      uni.reLaunch({
							// 		      	url: '/pages/qrcode/login'
							// 		      });
							// 		}, 1000)
							// 	}
							// });
							uni.clearStorageSync();
							uni.showToast({ title: '返回登录页...', icon: '/static/success.png'  });
							setTimeout(() => {
							      uni.reLaunch({
							      	url: '/pages/qrcode/login?me=1'
							      });
							}, 1000)
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 550rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}


	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}

	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	}

	.dialog2 {
		background: none;
	}

	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}

	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}


	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}

	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}

	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}

	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}

	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}

	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}


	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}

	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}


	// 顶部流星
	.space {
		position: absolute;
		top: 0;
		left: 0;
	}

	.planet {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #333;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -75rpx 0 0 -75rpx;
		overflow: hidden;
		z-index: 2;
	}

	.planet_shadow {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		top: -40%;
		right: -10%;
		border: 35rpx solid rgba(0, 0, 0, .15);
	}

	.star {
		display: block;
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
		background: #FFF;
		top: 100rpx;
		left: 400rpx;
		position: relative;
		transform-origin: 100% 0;
		animation: star-ani 6s infinite ease-out;
		box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}

	.star:after {
		content: '';
		display: block;
		top: 0rpx;
		left: 4rpx;
		border: 0rpx solid #fff;
		border-width: 0rpx 90rpx 2rpx 90rpx;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
		box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 3s infinite ease-out;
	}

	.pink {
		top: 30rpx;
		left: 395rpx;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.blue {
		top: 35rpx;
		left: 432rpx;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}

	.blue:after {
		/* border-color: transpareanimation-delay: 12s; */
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}

	.yellow {
		top: 50rpx;
		left: 600rpx;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}

	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}

	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}

		50% {
			opacity: 1;
			transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
		}

		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
		}
	}
	.giteeClass{
		margin-top: 30rpx;
		font-size: 34rpx;
		color: #111010;
		text-align: left;
	}
</style>
